<template>
	<div class="personalize-list">
		<div  class="personalize-list-item" v-for="(item,index) in topMvList" :key="index">
			<div class="personalize-left">{{index +1}}</div>
			<div class="personalize-center">
					  <el-image :src="item.cover"  @click="mvHandle(item.id)"></el-image>
					  <div class="personalize-center-icon">
						  <i class="iconfont icon-shipin"></i>
						  <span>{{item.playCount}}</span>
					  </div>
					  <div class="personalize-center-play">
						  <i class="iconfont icon-icon_play"></i>
					  </div>
					   
			</div>
			<div class="personalize-right">
					  <div>MV&nbsp;{{item.name}}</div>
					  <div>{{item.artistName}}</div>
			</div>
		</div>
	</div>

</template>

<script>


export default {
  name:'PersonalizeList',
  props:['topMvList'],
  data(){
    return{
      
    }
  },
  filters:{
  	  formatDate(val){
  		  if(val === null){
  			  return '无'
  		  }else {
  			  let date = new Date(val);
  			  return formatDate(date, "MM月dd日");
  		  }
  	  }
  },
  created() {
 
  },
  methods:{
	  mvHandle(id){
		 this.$router.push({name:'MvDetail',params:{id:id}})
	  }
   // this.$router.push({name:'MvDetail',params:{id:id}})
  }
}
</script>

<style lang="less" scoped>
.personalize-list{
	width: 100%;
	height: 88px;
	
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	align-items:center;
	
	margin-top: 20px;
	.personalize-list-item{
		display: flex;
		width: 50%;
		margin-top: 20px;
		.personalize-left{
			width: 4%;
			text-align: left;
			line-height: 88px;
		}
		.personalize-center{
			position: relative;
			cursor:pointer;
			margin-right: 8px;
			.el-image{
				height: 88px;
				width: 150px;
			}
			.personalize-center-icon{
				position: absolute;
				top: 0;
				right:4px;
				width: 60%;
				height: 20px;
				text-align: right;
				color: #FFFFFF;
				font-size: 14px;
			}
			.personalize-center-play{
				position: absolute;
				top: 0;
				right:50%;
				height:88px;
				line-height: 88px;
				text-align: center;
				color: red;
			}
			
		}
		.personalize-center .personalize-center-play{
			display:none; 
		}
		// 鼠标移入的时候增加子类的class,由display:none,到display:block
		.personalize-center:hover .personalize-center-play{
			display:block; 
		}
		.personalize-right{
		   display: flex;
		   flex-direction:column;
		   justify-content: space-between;
		   font-size: 14px;
		}
	}
	
	
}
</style>